<template>
  <div class="CampusInformation">
      <myHead title="校园资讯"></myHead>
      <div class="content">
        <div class="header">
            <div class="headerBox" v-for="(x,y) in typeTit" @click="type(y)">
                <p :class="typeIndex == y?'showTyped showType':'showType'">{{x.text}}</p>
              <transition name="el-zoom-in-center">
                <p v-show="y == typeIndex"></p>
              </transition>
            </div>
        </div>
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh" success-text="刷新成功">
            <van-list
              v-model="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="onLoad"
            >
            <van-cell v-for="(item,index) in list" :key="index" >
              <!--  消息部分  -->
              <div class="msg">
                <div class="msgHead">
                  <div class="msg-h-l" @click="jump('lifeDynamic')">
                    <p class="msg-h-tx"><img :src="item.avatar" alt="">
                      <!--                  <img src="../../../../static/img/vip111.png" alt="">-->
                    </p>
                    <div class="msg-h-dj">
                      <div class="msg-h-nick"><span>{{item.nickname}}</span></div>
                      <p>我怎么这么可爱 | 10分钟前</p>
                    </div>
                  </div>
                  <div v-if="item.headline_id != 0" class="follow" @click="follow">关注</div>
                </div>
                <div class="msg-txt" @click="jump('dynamic')">{{item.content}}</div>
                <div class="msg-img" @click="jump('dynamic')">
                  <img v-for="img in item.image" :src="$store.state.imgurlApi+img" alt="">
                </div>
                <div class="msg-dz">
                  <p><img src="../../../static/img/tz1.png" alt=""><span>20</span></p>
                  <p @click="jump('dynamic')"><img src="../../../static/img/tz2.png" alt=""><span>85</span></p>
                  <p><img src="../../../static/img/tz4.png" alt=""><span>98</span></p>
                </div>
              </div>
            </van-cell>
          </van-list>
        </van-pull-refresh>
      </div>


  </div>
</template>

<script>
  import myHead from "../../components/ClientComponents/lib/myHead";
  export default {
    name: "CampusInformation",
    components:{
      myHead
    },
    data(){
      return {
        typeTit:[{text:'关注'},{text:'推荐'},{text:'热门'}],
        data:[{list:[]},{list:[]}],
        list:[],
        loading: false,
        finished: false,
        refreshing: false,
        typeIndex:0,
        page:1, // 当前数据页
      }
    },
    created() {
      // this.onLoad(this.typeIndex);
    },
    methods:{
      onLoad(typeIndex = this.typeIndex) {
        if (this.refreshing) {
          this.page = 1;
          this.refreshing = false;
          this.$myAxios('index/Classify/headline_consult','post',{
            user_id:this.$myStorage.query(),
            headline_id:typeIndex,
            page:this.page
          }).then(res=>{
            if (res.data.state == '1') {
              if(res.data.headline_consult.length < 1){
                this.finished = true;
              }else {
                this.page+=1;
              }

              this.list = this.list.concat(res.data.headline_consult.data);
              this.loading = false;
            } else {
              this.error = true;
            }
          }).catch(res=>{
            this.error = true;
          });
          return;
        }
        this.$myAxios('index/Classify/headline_consult','post',{
          user_id:this.$myStorage.query(),
          headline_id:typeIndex,
          page:this.page
        }).then(res=>{
          console.log(res.data.headline_consult.data);
          if (res.data.state == '1') {
            if(res.data.headline_consult.data.length < 1){
              this.finished = true;
            }else {
              this.page+=1;
            }
            for(let i= 0;i<res.data.headline_consult.data.length;i++){
              if(res.data.headline_consult.data[i].image){
                res.data.headline_consult.data[i].image = res.data.headline_consult.data[i].image.split(",")
              }
            }
            this.list = this.list.concat(res.data.headline_consult.data);
            this.loading = false;
          } else {
            this.error = true;
          }
        }).catch(res=>{
          this.error = true;
        });
      },
      onRefresh() {
        // 清空列表数据
        this.list=[];
        this.finished = false;

        // 重新加载数据
        // 将 loading 设置为 true，表示处于加载状态
        this.loading = true;
        this.onLoad(this.typeIndex);
      },
     // 切换type
      type(index){
        if (this.typeIndex == index){return}
        $('.van-pull-refresh').scrollTop(0);
        this.typeIndex = index;
        this.page = 1;
        this.finished = false;
        this.list=[];
        // this.onLoad(this.typeIndex,true);
      },
      jump(page){
        this.$router.push({
          name:page
        })
      },
      follow(){

      }
    }
  }
</script>

<style scoped>
  .CampusInformation {
    padding-top: 1rem;
  }
  .header {
    position: fixed;
    top: .5rem;
    left: 0;
    z-index: 99;
    background-color: #FFFFFF;
    height: .5rem;
    width: 3.75rem;
    white-space: nowrap;
    overflow-y: hidden;
    overflow-x: scroll;
    display: -webkit-box;
  }
  .header::-webkit-scrollbar {
    display: none;
  }
  .headerBox {
    width: .7rem;
    height: 100%;
    position: relative;
    display: flex;
    flex-flow: column;
    align-items: center;
  }
  .headerBox>p:nth-child(2) {
    width: 55%;
    position: absolute;
    bottom: .05rem;
    height: .02rem;
    background-color: #FF8C3D;
  }
  .showType {
    height: .4rem;
    line-height: .4rem;
    font-size:.14rem;
    font-family:PingFang SC;
    font-weight:bold;
    color: #333333;
  }
  .showTyped {
    color: #FF8C3D;
  }


  .msg {
    width: 100%;
    box-sizing: border-box;
    padding: .15rem;
    background-color: #ffffff;
    margin-bottom: .1rem;
  }
  .msgHead {
    width: 100%;
    height: .32rem;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .15rem;
  }
  .msg-h-l {
    height: 100%;
    display: flex;
    flex-flow: row;
    align-items: center;
  }
  .msg-h-tx {
    position: relative;
  }
  .msg-h-tx>img:nth-child(1) {
    width: .32rem;
    height: .32rem;
  }
  .msg-h-tx>img:nth-child(2) {
    width: .15rem;
    height: .15rem;
    position: absolute;
    right: -.06rem;
    bottom: -.01rem;
  }
  .msg-h-dj {
    height: 100%;
    display: flex;
    flex-flow: column;
    margin-left: .1rem;
    justify-content: space-between;
  }
  .msg-h-dj>p:nth-child(2) {
    font-size: .11rem;
    color: #999999;
    line-height: .11rem;
  }
  .msg-h-nick {
    display: flex;
    flex-flow: row;
    align-items: center;
  }
  .msg-h-nick>p {
    width:.4rem;
    height:.14rem;
    background:rgba(255,142,73,1);
    border-radius:.07rem;
    font-size: .1rem;
    text-align: center;
    line-height: .14rem;
    color: #ffffff;
    margin-left: .1rem;
  }
  .msg-h-nick>span {
    font-size: .15rem;
    color: #333333;
    line-height: .15rem;
  }
  .follow {
    width:.5rem;
    height:.2rem;
    background:rgba(255,233,220,1);
    border-radius:.11rem;
    font-size: .12rem;
    color: #FF8E49;
    line-height: .2rem;
    text-align: center;
  }
  .msg-txt {
    font-size: .13rem;
    color: #666666;
    line-height: .18rem;
    margin-bottom: .1rem;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
  }
  .msg-img>img {
    width: 1.12rem;
    height: 1.12rem;
    margin-bottom: .05rem;
  }
  .msg-img {
    display: flex;
    flex-flow: row wrap;
    margin-bottom: .1rem;
  }

  .msg-bq {
    width:1.5rem;
    height:.3rem;
    background:rgba(242,242,242,1);
    border-radius:.15rem;
    color: #000000;
    font-size: .12rem;
    text-align: center;
    line-height: .3rem;
    margin-bottom: .1rem;
  }
  .msg-bq>span {
    color: #6F2EEE;
  }
  .msg-dz {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .msg-dz>p {
    display: flex;
    flex-flow: row;
    align-items: center;
  }
  .msg-dz>p>img {
    width: .17rem;
    margin-right: .05rem;
  }
  .msg-dz>p {
    font-size: 0;
  }
  .msg-dz>p>span {
    font-size: .12rem;
    color: #999999;
  }


  /* 懒加载适配 */
  >>> .van-cell {
    padding: 0;
    line-height: 0;
    font-size: 0;
  }
  >>> .van-list__loading {
    font-size: .14rem;
    line-height: .5rem;
  }
  >>> .van-loading__spinner--circular{
    width: .16rem;
    height: .16rem;
  }
  >>> .van-loading__text {
    font-size: .14rem;
    margin-left: .08rem;
  }
</style>
